<template>
    <transition name="opacity-fade" @after-enter="afterEnter">
        <div :style="{ 'background-color': backgroundColor, padding: padding + ' 0', 'z-index': zIndex }" class="c-view">
            <a-card v-loading="loading" :style="{ width: width }" :body-style="bodyStyle" class="card-container">
                <slot name="header" />
                <slot />
            </a-card>
        </div>
    </transition>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    props: {
        bodyStyle: {
            type: Object,
            default: () => {
                return {};
            }
        },
        loading: {
            type: Boolean,
            default: false
        },
        // 更改背景颜色颜色
        backgroundColor: {
            type: String,
            default: '#F5F6F9' // rgba(0, 0, 0, 0.6) 黑色半透明
        },
        /** 展示内容的宽 */
        width: {
            type: String,
            default: '1200px'
        },
        /** 展示内容的上下padding */
        padding: {
            type: String,
            default: '40px'
        }
    },
    emits: ['afterEnter'],
    setup(_, { emit }) {
        const state = reactive<any>({
            zIndex: 999,
            loadingObj: null
        });
        const afterEnter = () => {
            emit('afterEnter');
        };
        return {
            ...toRefs(state),
            afterEnter
        };
    }
});
</script>
<style lang="less" scoped>
.opacity-fade-enter-active,
.opacity-fade-leave-active {
    transition: all 0.2s;
}
.opacity-fade-enter,
.opacity-fade-leave-to {
    opacity: 0;
}
/** 容器布局 */
.c-view {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.card-container {
    margin: 0 auto;
    height: 100%;
}
</style>
